<%@page import="service.implement.EmployeeDAO"%>
<%@page import="model.Employee"%>
<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
 
<script language="javascript" type="text/javascript">
function search()
{
	//alert('ok');
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4)
    {
     if(xmlhttp.status==200) {
       //alert('call ajax success');
      //console.log(xmlhttp.response);
       var result = document.getElementById("result");
       var db = xmlhttp.response.split(";");
       //console.log(db);
		document.write("<h1>Result Search</h1>")
       document.write("<table><tr><td style='width: 50px;'>Id</td>");
        document.write("<td style='width: 150px; text-align: right;' >Name</td>");
        document.write("<td style='width: 200px; text-align: right;'>Username</td>");
        document.write("<td style='width: 100px; text-align: right;'>Email</td></tr></table>");
       for (i =0; i < db.length -1; i++){
//    	   console.log(db[i]);
//   	   console.log(result);
    	   if(db[i] != "") { 
    		   document.write("<table><tr><td style='width: 50px;'>" + db[i].split("|")[1] + "</td>");
    		   document.write("<td style='width: 150px; text-align: right;'>" + db[i].split("|")[2] + "</td>");
    		   document.write("<td style='width: 200px; text-align: right;'>" + db[i].split("|")[3] + "</td>");
    		   document.write("<td style='width: 100px; text-align: right;'>" + db[i].split("|")[4] + "</td></tr></table>");
//	    	 	console.log(db[i].split("|")[1]);
//	    	   result.innerHTML += db[i].split("|")[1];
//	    	   result.innerHTML +=db[i].split("|")[2];
//	    	   result.innerHTML +=db[i].split("|")[3];
//	    	   result.innerHTML +=db[i].split("|")[4];
       		}
    	  // result.innerHtml = db[i];
       }
     } else  {
       alert(xmlhttp.status);
     }
    }
  
  }
  var key = document.getElementById('textinput').value;
  var type = document.getElementById('typeSearch').value;
  
xmlhttp.open("GET","webservice?key=" + key + "&typeSearch=" + type,true);
xmlhttp.send();
}
</script>
</table>
	<%@ include file="Menu.jsp"%>
		<table>
			<tr>
				<td><select name="typeSearch" id = "typeSearch" >
						<option value="E">Employee</option>
						<option value="P">Project</option>
						<option value="T">Time Sheet</option>
				</select></td>
				<td><input type="text" id="textinput" name="search" /></td>
				<td><input type="button" class="submit1" value="Search" onclick="javaScript:search();" /></td>
			</tr>
		
	 	<div id="result"></div>

</body>
</html>